<template>
	<view class="user_box">
		<!-- head区域 -->
		<view class="head_user">
			<!-- 以登录 -->
			<view class="head_user_info" v-if="isLogin">
				<image :src="userinfo.avatarurl"></image>
				<view class="head_user_info_name" hover-class="touchOpacity" @click="goUseinfo">
					<text>{{userinfo.nickname}}</text>
					<text>完善资料让小U更懂你</text>
				</view>
				<view class="head_user_info_sign" hover-class="touchOpacity" @click="leave">
					<image src="../../static/images/红包.png"></image>
					<text>退出登录</text>
				</view>
			</view>
			<!-- 未登录 -->
			<view class="noLogin" v-else>
				<button class="goLogin" @click="goPhoneLogin">去登录</button>
			</view>
			<view class="head_usert_menu">
				<view class="head_usert_menu_row" hover-class="touchOpacity" v-for="(item,index) in menuList"
					:key="index">
					<text>{{item.number}}</text>
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="head_user_order">
				<view class="head_user_order_top" hover-class="touchOpacity" @click="goOrder(0)">
					<text>我的订单</text>
					<text>全部订单 > </text>
				</view>
				<view class="head_user_order_bottom">
					<view class="head_user_order_bottom_row" hover-class="touchOpacity" v-for="(item,index) in orders"
						:key="index" @click="goOrder(index)">
						<image :src="item.src"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能菜单区域 -->
		<view class="resDetail">
			<view hover-class="touchOpacity" @click="goAddress">
				<label for="" class="resDetail_title">
					<image src="../../static/images/address.png"></image>
					地址管理
				</label>
				<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;"> ></label>
			</view>
			<view class="" hover-class="touchOpacity">
				<label for="" class="resDetail_title">
					<image src="../../static/images/wallet.png"></image>
					我的钱包
				</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">剩余200U币 ></label>
			</view>
			<view class="" hover-class="touchOpacity" @click="goCode">
				<label for="" class="resDetail_title">
					<image src="../../static/images/QR_code.png"></image>
					我的二维码
				</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;"> ></label>
			</view>
			<view class="" hover-class="touchOpacity">
				<label for="" class="resDetail_title">
					<image src="../../static/images/partner.png"></image>
					我的小伙伴
				</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;"> ></label>
			</view>
			<view class="" hover-class="touchOpacity">
				<label for="" class="resDetail_title">
					<image src="../../static/images/free.png"></image>
					0元试用
				</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;"> ></label>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		onLoad
	} from '../../uni_modules/uview-ui/libs/mixin/mixin';
	export default {
		data() {
			return {
				isLogin: false, //登录状态
				// isLogin: this.$store.state.isLogin,
				userinfo: {
					avatarurl: '../../static/images/01.png',
				}, //初始化用户信息
				menuList: [{
						name: '我的收藏',
						number: 12
					},
					{
						name: '浏览记录',
						number: 12
					},
					{
						name: '我的红包',
						number: '￥0'
					},
					{
						name: '优惠券',
						number: 12
					}
				],
				orders: [{
						src: '../../static/images/1.png',
						name: '代付款'
					},
					{
						src: '../../static/images/2.png',
						name: '代发货'
					},
					{
						src: '../../static/images/3.png',
						name: '代确认'
					},
					{
						src: '../../static/images/4.png',
						name: '售后/退款'
					}
				]
			}
		},
		async onShow() {
			// 要把this传递给$isLogin  否则会报错  this指向的问题
			let res = await this.$isLogin(this);
			if (res) {
				// 登录成功
				// 更改登录状态
				this.isLogin = res;
				// 获取用户信息 
				this.userinfo = uni.getStorageSync('userInfo');
				console.log(this.userinfo);
				this.userinfo.avatarurl = this.$baseUrl + this.userinfo.avatarurl
				// 更改tabbar
				uni.setTabBarItem({
					index: 3,
					text: '我的'
				})
			} else {
				this.isLogin = res;
				// 更改tabbar
				uni.setTabBarItem({
					index: 3,
					text: '未登录'
				})
			}

			// // 判断是否登录  登录显示我的  否则未登录
			// if (uni.getStorageSync('userInfo')) {
			// 	// 更改tabbar
			// 	uni.setTabBarItem({
			// 		index: 3,
			// 		text: '我的'
			// 	})
			// } else {
			// 	// 更改tabbar
			// 	uni.setTabBarItem({
			// 		index: 3,
			// 		text: '未登录'
			// 	})

		},
		methods: {
			// 跳转到签到页面（测试页面）
			goSign() {
				uni.navigateTo({
					url: '../sign/sign'
				})
			},
			// 跳转到我的二维码页（测试页面）
			goCode() {
				uni.navigateTo({
					url: '../mycode/mycode'
				})
			},
			// 跳转到用户信息页面
			goUseinfo() {
				uni.navigateTo({
					url: '../userinfo/userinfo'
				})
			},
			// 跳转到订单页面
			goOrder(index) {
				if (index != 3) {
					uni.navigateTo({
						url: '../orderlist/orderlist?status=' + index
					})
				}
			},
			// 跳转到地址页面
			goAddress() {
				uni.navigateTo({
					url: '../address/address'
				})
			},
			// 点击登录  跳转登录手机号页面
			goPhoneLogin() {
				// #ifndef MP-WEIXIN
				uni.navigateTo({
					url: '/pages/phoneLogin/phoneLogin'
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.navigateTo({
					url: '/pages/wxLogin/wxLogin'
				})
				// #endif
			},
			// 退出登录
			leave() {
				// 清除缓存
				uni.removeStorageSync('userInfo');
				uni.setStorageSync('isLogin', false);
				// 更改仓库状态
				this.$store.commit('changeLogin', false)
				this.isLogin = false
			}
		}
	}
</script>

<style>
	/* 引入样式 */
	/* @import url("@/static/css/user.css"); */
	.user_box {
		background-color: #f2f2f2;
		/* height: 100vh; */
	}

	/* head区域 */
	.goLogin {
		width: 20%;
		background-color: #fff;
		color: #ff0630;
	}

	.head_user {
		width: 100%;
		height: 420rpx;
		background: linear-gradient(#FF6040, #FF8A80);
		overflow: hidden;
	}

	.head_user .head_user_info {
		height: 128rpx;
		width: 100%;
		/* border: 1rpx solid blue; */
		margin-top: 20rpx;
		position: relative;
		display: flex;
		align-items: center;
	}

	.head_user_info image {
		width: 128rpx;
		height: 128rpx;
		margin-left: 20rpx;
		border-radius: 100%;
	}

	.head_user_info .head_user_info_name {
		height: 88rpx;
		width: 196rpx;
		/* 		border: 1rpx solid green; */
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.head_user_info_name text:nth-of-type(1) {
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.head_user_info_name text:nth-of-type(2) {
		font-size: 20rpx;
		color: #FFFFFF;
		width: 208rpx;
		line-height: 32rpx;
		text-align: center;
		border: 1rpx solid #FFFFFF;
		border-radius: 3rpx;
	}

	.head_user_info .head_user_info_sign {
		width: 152rpx;
		height: 40rpx;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		background-color: #FFD4CC;
		position: absolute;
		top: 44rpx;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.head_user_info_sign image {
		width: 32rpx;
		height: 32rpx;
	}

	.head_user_info_sign text {
		color: #FF6243;
		font-size: 20rpx;
	}

	.head_user .head_usert_menu {
		height: 128rpx;
		width: 100%;
		margin-top: 20rpx;
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.head_usert_menu .head_usert_menu_row {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
	}

	.head_usert_menu_row text:nth-of-type(1) {
		font-size: 36rpx;
	}

	.head_usert_menu_row text:nth-of-type(2) {
		font-size: 20rpx;
	}

	.head_user_order {
		width: 710rpx;
		height: 206rpx;
		background-color: white;
		border-radius: 5rpx;
		position: absolute;
		left: 20rpx;
		top: 300rpx;
	}

	.head_user_order .head_user_order_top {
		width: 670rpx;
		height: 32rpx;
		margin: 20rpx 20rpx 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head_user_order_top text:nth-of-type(1) {
		font-size: 32rpx;
		font-weight: bold;
	}

	.head_user_order_top text:nth-of-type(2) {
		font-size: 24rpx;
		color: #FF6040;
	}

	.head_user_order .head_user_order_bottom {
		width: 670rpx;
		height: 104rpx;
		margin: 20rpx 20rpx 0 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.head_user_order_bottom .head_user_order_bottom_row {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.head_user_order_bottom_row image {
		width: 64rpx;
		height: 64rpx;
	}

	.head_user_order_bottom_row text {
		font-size: 20rpx;
	}

	/* 功能菜单区域 */
	/* 结果明细 */
	.resDetail {
		width: 100%;
		background: #FFFFFF;
		padding: 0 20rpx 20rpx 20rpx;
		margin-top: 110rpx;
		overflow: hidden;
	}

	.resDetail .resDetail_title {
		font-size: 24rpx;
		font-weight: 600;
	}

	.resDetail view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		margin-top: 40rpx;
	}

	.resDetail image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 15rpx;
	}
</style>